<script setup>
import MostHeader from '@/components/MostHeader.vue';
import { reactive, onMounted,h } from 'vue';
import {setStuInfo} from "@/views/resumeCreation/components/contentEdit/share.js";
import { RouterView, useRouter } from 'vue-router'
import {
  PieChartOutlined,
  ProfileOutlined,
  InboxOutlined,
  InsuranceOutlined,
  ScheduleOutlined
} from '@ant-design/icons-vue';

onMounted(async ()=>{
  await setStuInfo()
})

const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: [],
});
const items = reactive([
  {
    key: '1',
    icon: () => (PieChartOutlined),
    label: '基本信息',
    title: 'Option 1',
  },
  {
    key: '6',
    icon: () => (InsuranceOutlined),
    label: '账号安全',
    title: 'Option 6',
  },
  {
    key: '2',
    icon: () => h(ProfileOutlined),
    label: '简历管理',
    title: 'Option 2',
    children: [
      {
        key: '3',
        label: '在线简历',
        title: 'Option 3',
      },
      {
        key: '4',
        label: '附件简历管理',
        title: 'Option 4',
      },
    ]
  },
  {
    key: '5',
    icon: () => h(InboxOutlined),
    label: '实习申请管理',
    title: 'Option 5',
  },
  {
    key: '7',
    icon: () => h(ScheduleOutlined),
    label: '面试时间查看',
    title: 'Option 7',
  }
]);

const router = useRouter()
const currRoute = router.currentRoute.value.fullPath.split('/').pop()
if (currRoute == 'resume') {
  state.selectedKeys = ['3']
  state.openKeys = ['2']
} else if (currRoute == 'schedule') {
  state.selectedKeys = ['5']
} else if (currRoute == 'security') {
  state.selectedKeys = ['6']
} else if (currRoute == 'time') {
  state.selectedKeys = ['7']
}

const menuClick = ({ key }) => {
  if (key == 1) {
    router.push('/personal')
  } else if (key == 3) {
    router.push('/personal/resume')
  }
  else if (key == 4){
    router.push('/personal/attachment')
  }
  else if (key == 5) {
    router.push('/personal/schedule')
  } else if (key == 6) {
    router.push('/personal/security')
  } else if (key == 7) {
    router.push('/personal/time')
  }
}
</script>

<template>
  <div class="container">
    <MostHeader />

    <div class="main">
      <div style="background-color: #fafafa;">
        <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" mode="inline"
                :inline-collapsed="state.collapsed" :items="items" @click="menuClick"
                style="background-color: #fafafa;height: 100vh"></a-menu>
      </div>

      <div class="content">
          <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.content {
  width: 100%;
  padding: 30px;
}
</style>